<template>
	<view class="container">
		<view class="top-container bg-gradual-green">
			<!-- <image class="bg-img" src="/static/img/test//mine_bg_3x.png"></image> -->
			<view @tap="logout" class="logout" v-if="isLogin">
				<image class="logout-img" src="/static/img/logout.png"></image>
				<text class="logout-txt">退出</text>
			</view>
			<view v-show="!isLogin" class="user-wrapper">
				<navigator url="/pages/login/login" class="user">
					<image mode="aspectFill" class="avatar-img" src="/static/img/user3.png"></image>
					<text class="user-info-mobile">Hi，请登录</text>
				</navigator>
			</view>
			<view v-show="isLogin" class="user">
				<image class="avatar-img" mode="aspectFill" :src="loginInfo.hasLogin ? toUrl(loginInfo.user.avatar)  || '/static/img/user2.png' : '/static/img/user2.png'"></image>
				<view class="user-info-mobile">				
					<text class="text-df">Hi,</text>
					{{ loginInfo.user.realname||loginInfo.user.username}}
					<text class="member">[{{'普通会员'}}]</text>					
				</view>				
			</view>
		</view>

		<view class="middle-container text-green">
			<view class="middle-item">
				<text class="cuIcon-favorfill icon"></text>
				<text class="middle-tag" data-path="/pages/user/friend" @tap="goTo">我的关注</text>
			</view>
			<view class="middle-item">
				<text class="cuIcon-fork icon"></text>
				<text class="middle-tag" data-path="/pages/user/friend" @tap="goTo">我的好友</text>
			</view>
		</view>

		<view class="bottom-container">
			<view class="item" data-path="/pages/login/login?op=loginbind" @tap="goTo" v-if="isLogin&&isLogin.type=='user'">
				<view class="text-xxl icon"><text class="cuIcon-lock text-green"></text></view>
				<text class="item-name text-grey">绑定学号</text>
			</view>
			<view class="item" data-path="/pages/user/clocklog" @tap="goTo">
				<view class="text-xxl icon"><text class="cuIcon-calendar text-red"></text></view>
				<text class="item-name text-grey">考勤记录</text>
			</view>			
			<view class="item" data-path="/pages/user/about" @tap="goTo">
				<view class="text-xxl icon"><image src="/static/logo.png" class="item-img"></image></view>
				<text class="item-name text-grey">关于我们</text>
			</view>

			<view class="item" @tap="previewImage($event, [imgServer+'/img/zs.png'])">
				<view class="text-xxl icon"><text class="cuIcon-recharge text-red"></text></view>
				<!-- <image class="item-img" src="/static/img/test//mine_icon_jiayouzhan_3x.png"></image> -->
				<text class="item-name text-grey">赞赏支持</text>
			</view>
			<view class="item" data-path="/pages/user/log" @tap="goTo">
				<view class="text-xxl icon"><text class="cuIcon-formfill text-green"></text></view>
				<text class="item-name text-grey">更新日志</text>
			</view>			
			<!-- <view class="item" open-type="contact">
				<view class="text-xxl icon"><text class="cuIcon-writefill text-cyan"></text></view>
				<text class="item-name text-grey">意见反馈</text>
			</view> -->
		</view>
	</view>
</template>

<script>
import baseMixin from '@/mixin/base.js';
import api from '@/common/api.js';
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState('base', ['appName', 'loginInfo']),
		isLogin() {
			return api.isLogin();
		}
	},
	mixins: [baseMixin],
	data() {
		return {};
	},
	created() {
		this.init();
	},
	methods: {
		init() {
			//强制登录
			var loginUser = api.checkLogin(this.$store.state.pages.home.path);
			if (!loginUser) {
				return false;
			}
		},
		logout() {
			api.logout();
		}
	}
};
</script>

<style>
.container {
	position: relative;
	padding-bottom: 100rpx;
}

.top-container {
	height: 500rpx;
	position: relative;
	display: flex;
	flex-direction: column;
}

/* .bg-img {
	position: absolute;
	width: 100%;
	height: 440rpx;
} */

.logout {
	width: 110rpx;
	height: 36rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 70rpx 0 24rpx 32rpx;
	position: relative;
	z-index: 2;
}

.logout-img {
	width: 36rpx;
	height: 36rpx;
	margin-right: 11rpx;
}

.logout-txt {
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
}

.user-wrapper {
	margin-top: 45rpx;
	display: flex;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin-top: 85rpx;
}

.user {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 2;
	margin-top: 45rpx;
}
.user .member{
	color:#FFBB69;
}
.avatar-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	align-self: center;
}

.user-info {
	display: flex;
	flex-direction: row;
	margin-top: 30rpx;
	align-items: center;
}

.user-info-mobile {
	margin-top: 30rpx;
	position: relative;
	font-size: 28rpx;
	color: #fefefe;
	line-height: 28rpx;
	align-self: center;
	padding: 0 50rpx;
}

.middle-container {
	height: 138rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 10rpx;
	background-color: #ffffff;
	margin: -60rpx 30rpx 26rpx 30rpx;
	box-shadow: 0 15rpx 10rpx -15rpx #dddddd;
/* 	box-shadow: 0px 10px 10px 0px rgba(0, 161, 124, 0.1); */
	position: relative;
	z-index: 2;
}

.middle-item {
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	flex: 1;
}

.middle-item .icon {
	font-size: 57rpx;
}

.middle-tag {
	font-size: 34rpx;
	color: #666;
	line-height: 32rpx;
	padding-left: 20rpx;
}

.bottom-container {
	display: flex;
	flex-wrap: wrap;
	justify-content:flex-start; 
	padding: 10rpx 14rpx 50rpx 15rpx;
	margin: 0 30rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	box-sizing: border-box;
	box-shadow: 0 0 20rpx #dddddd;
	 box-shadow: 0px 10px 10px 0px rgba(0, 161, 124, 0.1); 
}

.bottom-container .item {
	display: flex;
	flex-direction: column ; 
	width: 220rpx; 
	justify-content: center;
	align-items: center;
	margin-top: 45rpx;
}
.item-img {
	width: 50rpx;
	height: 50rpx;
}
.bottom-container .icon {
	font-size: 55rpx;
}
.item-name {
	padding-top: 13rpx;
	font-size: 28rpx;
	color: #666666;
	min-width: 80rpx;
	text-align: center;
}
</style>
